
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用js实现上移、下移、置顶、置底功能</title>
    <ul id="addChildDiv">
        <li>001 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置顶</a><a href="#" class="bottom1">置底</a></li>
    </ul>
    <script>
       function f() {
           ("#addChildDiv").on('click', 'a', function(event) {
               event.preventDefault;
               var parent=(this).parent();
               var parents=(this).parents("#addChildDiv");
               var len=parents.children().length;
               if(((this).is(".up1") || $(this).is(".top1")) && parent.index()==0){
                   return false;
               }else if(((this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){
                   return false;
               }
               switch (true) {
                   case (this).is(".up1"):
                       var prev = parent.prev();
                       parent.insertBefore(prev);
                       break;
                   case(this).is(".down1"):
                       var next = parent.next();
                       parent.insertAfter(next);
                       break;
                   case(this).is(".top1"):
                       parents.prepend(parent);
                       break;
                   case(this).is(".bottom1"):
                       parents.append(parent);
                       break;
               }
           });
       }
    </script>
</head>
<body>


</body>
</html>